<!-- 搜索区 -->
<div id="divmain">
  <div class="col-sm-12 ele-hidden">
    <div class="col-sm-3 ">
      <div class="form-group">
        <label>姓名：</label>
        <label>
          <input type="text" class="form-control text-length" [(ngModel)]="personName" placeholder="请输入姓名" name="name"  
          onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" 
          onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" 
          oncontextmenu = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" >
        </label>
      </div>
      <div class="form-group div-hidden">
        <label>学历：</label>
        <label>
          <select class="form-control text-length" [(ngModel)]="educationName" name="education">
            <option> </option>
            <option *ngFor="let option of educationOptions" [value]="option.name">{{option.name}}</option>

          </select>
        </label>
      </div>
    </div>
    <div class="col-sm-3 ">
      <div class="form-group">
        <label>公司名：</label>
        <label>
          <input type="text" class="form-control text-length" [(ngModel)]="companyName" placeholder="请输入公司" name="companyName" 
           onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" 
          onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" 
          oncontextmenu = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"  >
        </label>
      </div>
      <div class="form-group div-hidden">
        <label>&nbsp;&nbsp;&nbsp;&nbsp;月薪：</label>
        <label>
          <select class="form-control text-length" [(ngModel)]="salaryRange" name="salaryRange">
            <option> </option>
            <option *ngFor="let option of salaryScopeOptions" [value]="option.name">{{option.name}}</option>
          </select>
        </label>
      </div>

    </div>
    <div class="col-sm-3 ">
      <div class="form-group">
        <label>所在期数：</label>
        <label>
          <select class="form-control text-length" [(ngModel)]="gradeName" name="grade">
            <option> </option>
            <option *ngFor="let option of gradeOptions" [value]="option.dictName">{{option.dictName}}</option>
          </select>
        </label>
      </div>
      <div class="form-group col-sm-offset-2 div-hidden">
        <!-- disabled="disabled" 隐藏的搜索按钮-->
        <button type="submit" style="width: 100px" class="btn btn-primary" (click)="combinationSearch(modal)">
          搜索
        </button>
      </div>
    </div>
    <div class="col-sm-2 ">
      <div class="form-group col-sm-offset-2">
        <!-- disabled="disabled" -->
        <button type="submit" style="width: 100px" class="btn btn-primary" (click)="combinationSearch(modal)">
          搜索
        </button>
      </div>
    </div>
  </div>

  <!-- 表格区 -->
  <div class="col-sm-12">
    <data-table (changepage)="changepage($event,modal)" [isCheckBox]="isCheck" [title]="title" [arr]="arrbutes" [addButton]="btnAdd"
      (addOpen)="addOpen($event,addModal)" [editButton]="btnEdit" [deleteButton]="btnDelete" (deletesEmit)="deleteDatas($event)"
      [importButton]="btnImport" (importEmit)="import($event)" [exportButton]="btnExport" (exportEmit)="export($event)" [buttonList]="btnList"
      (operat)="operatData($event,editModal)" [total]="total" [data]="data" [page]="page" [sizeList]="sizeList" [paging]="paging"
      [pageSize]="pageSize" [buttonstyle]="btnstyle">
    </data-table>
  </div>


  <!-- 添加弹出框 -->
  <div #addModal class="modal-dialog" (click)="draggable()" style="width:700px">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="close(addModal)">×
        </button>
        <h4 class="modal-title">
          添加毕业生基础数据
        </h4>
      </div>
      <div class="modal-body">
        <form role="form" class="form-horizontal" #addform="ngForm">
          <div class="form-group">
            <div class="col-sm-6 form-inline">
              <label class="control-label">姓名：</label>
              <label>
                <input type="text" #name="ngModel" id="name" class="form-control" placeholder="请输入姓名" onfocus="this.select()" [(ngModel)]="personalInfo.name"
                  name="name"  onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" 
                  onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" 
                  oncontextmenu = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"  required>
              </label>
            </div>
            <div class="col-sm-6 form-inline">
              <label class="control-label">性别：</label>
              <label>
                <!-- <input type="text" class="form-control" [(ngModel)]="personalInfo.sex" name="sex"> -->
                <select class="form-control sel-width" [(ngModel)]="personalInfo.sex" name="sex" required>
                  <option *ngFor="let option of sexOptions" [value]="option.name">{{option.name}}</option>
                </select>
              </label>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-6 form-inline">
              <label class="control-label">期数：</label>
              <label>
                <select class="form-control sel-width" [(ngModel)]="personalInfo.grade" name="grade" required>

                  <option *ngFor="let option of gradeOptions" [value]="option.id">{{option.dictName}}</option>
                </select>
                <!-- <input type="text" class="form-control" [(ngModel)]="personalInfo.grade" name="grade"> -->
              </label>
            </div>
            <div class="col-sm-6 form-inline">
              <label class="control-label">邮箱：</label>
              <label>
                <input type="text" class="form-control" [(ngModel)]="personalInfo.email" placeholder="请输入邮箱" name="email" #appEmail="ngModel"
                  email required>
                <p [hidden]="appEmail.valid||appEmail.pristine">不是合法的邮箱地址</p>

              </label>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-6 form-inline">
              <label>电话：</label>
              <label>
                <input type="text" class="form-control" [(ngModel)]="personalInfo.phone" placeholder="请输入电话" name="phone" #phone="ngModel"
                  phone="CN" minlength='11' maxlength="11" onkeyup="value=value.replace(/[^0-9]/g,'')"  required>
                <p [hidden]="phone.valid||phone.pristine">不是合法的电话号码</p>
              </label>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <!-- disabled="disabled" -->
        <button type="button" class="btn btn-primary" (click)="add(addModal)">
          添加
        </button>
        <button type="button" class="btn btn-default" (click)="close(addModal)">
          取消
        </button>
      </div>
    </div>
  </div>

  <!-- 修改弹出框 -->
  <div #editModal class="modal-dialog" (click)="draggable()">
    <div class="modal-content">
      <form>
        <div class="modal-header">
          <button type="button" class="close" (click)="close(editModal)">×
          </button>
          <h4 class="modal-title">
            修改毕业生基础数据
          </h4>
        </div>
        <div class="modal-body">
          <form role="form" class="form-horizontal" #addform="ngForm">
            <div class="form-group">
              <div class="col-sm-6 form-inline">
                <label class="control-label">姓名：</label>
                <label>
                  <input type="text" #name="ngModel" id="name" class="form-control" onfocus="this.select()" [(ngModel)]="personalInfo.name"
                    name="familyMemName" onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" 
                    onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" 
                    oncontextmenu = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"   required>
                </label>
              </div>
              <div class="col-sm-6 form-inline">
                <label class="control-label">性别：</label>
                <label>
                  <!-- <input type="text" class="form-control" [(ngModel)]="personalInfo.sex" name="sex"> -->
                  <select class="form-control sel-width" [(ngModel)]="personalInfo.sex" name="sex" required>
                    <option *ngFor="let option of sexOptions" [value]="option.name">{{option.name}}</option>
                  </select>
                </label>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-6 form-inline">
                <label class="control-label">期数：</label>
                <label>
                  <select class="form-control sel-width" [(ngModel)]="personalInfo.grade" name="grade" required>

                    <option *ngFor="let option of gradeOptions" [value]="option.id">{{option.dictName}}</option>
                  </select>
                  <!-- <input type="text" class="form-control" [(ngModel)]="personalInfo.grade" name="grade"> -->
                </label>
              </div>
              <div class="col-sm-6 form-inline">
                <label class="control-label">邮箱：</label>
                <label>
                  <input type="text" class="form-control" [(ngModel)]="personalInfo.email" name="email" #appEmail="ngModel" email required>
                  <p [hidden]="appEmail.valid||appEmail.pristine">合法的邮箱地址</p>
                </label>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-6 form-inline">
                <label>电话：</label>
                <label>
                  <input type="text" class="form-control" [(ngModel)]="personalInfo.phone" placeholder="请输入电话" name="phone" #phone="ngModel"
                    phone="CN" minlength='7' maxlength="11" onkeyup="value=value.replace(/[^0-9]/g,'')" required>
                  <p [hidden]="phone.valid||phone.pristine">不是合法的电话号码</p>
                </label>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <!-- disabled="disabled" -->
          <button type="button" class="btn btn-primary" (click)="update(editModal,modal)">
            修改
          </button>
          <button type="button" class="btn btn-default" (click)="close(editModal,modal)">
            取消
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- 提示框，隐藏IP地址 -->
  <p-dialog header="提示" [(visible)]="display" modal="modal" width="400" [responsive]="true">
    <p style="text-align:center">
      {{messages}}
    </p>
    
    <p-footer>
        <!-- <p> -->
            <span>{{identificateTime}}s</span>
            <span>后自动关闭</span>
          <!-- </p> -->
        <!-- (click)="display=false" -->
      <button type="button" pButton icon="fa-check" (click)=closeDialog() label="确定"></button>
    </p-footer>
  </p-dialog>


  <!-- 文件导入 -->
  <p-dialog header="导入文件" [(visible)]="displayFile" modal="modal" [responsive]="true" width="400">
    <p>提示：导入前请先下载模板
      <a style="color:#41ABE9" (click)="down()">点击下载模板</a>
    </p>
    <div style="text-align:center;display:none">
      <input #filepath id="filePath" type="file" name="filePath" style="display:none" value="选择文件" ng2FileSelect [uploader]="uploader"
        (change)="selectedFileOnChanged($event)">
    </div>
    <input class="form-control" type="text" placeholder="选择文件" style="width:50%;height:25px;display:inline" [(ngModel)]="filename">
    <button type="button" pButton (click)="show(filepath)" label="选择文件"></button>
    <p-footer>
      <button type="button" pButton icon="fa-check" (click)="upload()" label="上传"></button>
      <button type="button" pButton icon="fa-close" (click)="displayFile=false" label="取消"></button>
    </p-footer>
  </p-dialog>


  <!-- 上传Excel模板  -->
  <button (click)="showTempUpload()" style="display:none">上传Excel模板</button>
  <!-- 文件导入 -->
  <p-dialog header="导入文件" [(visible)]="displayTemplet" modal="modal" [responsive]="true" width="300">
    <div style="text-align:center;display:none">
      <input #templetFilepath id="templetFilepath" type="file" name="templetFilepath" style="display:none" value="选择文件" ng2FileSelect
        [uploader]="templateUploader" (change)="selectedTempFileChanged($event)">
    </div>
    <input class="form-control" type="text" placeholder="选择文件" style="width:50%;height:25px;display:inline" [(ngModel)]="templateFileName">
    <button type="button" pButton (click)="show(templetFilepath)" label="选择文件"></button>
    <p-footer>
      <button type="button" pButton icon="fa-check" (click)="uploadTemplet()" label="上传"></button>
      <button type="button" pButton icon="fa-close" (click)="displayTemplet=false" label="取消"></button>
    </p-footer>
  </p-dialog>
</div>